<template>
  <div class="mlgl">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClickTabs">
      <el-tab-pane label="业务目录" name="1"></el-tab-pane>
      <el-tab-pane label="技术目录" name="2"></el-tab-pane>
    </el-tabs> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="搜索">
        <el-input v-model="formInline.search" placeholder="搜索内容"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary" @click="add">新建</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table
        :data="tableData"
        border
        :default-expand-all="false"
        :tree-props="{ children: 'children', haschildren: 'haschildren' }"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        row-key="key"
        ref="ElTableHeaderRef"
      >
        <el-table-column prop="title" label="名称"> </el-table-column>
        <el-table-column prop="parentId" label="目录层级"></el-table-column>
        <el-table-column prop="parentId" label="上级目录"> </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="handleClickEdit(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              @click="handleClickAddChild(scope.row)"
              type="text"
              size="small"
              >添加下级</el-button
            >
            <el-button
              @click="handleClickDel(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="父级目录">
          <el-cascader
            v-model="pid"
            :options="options"
            :props="{ checkStrictly: true, value: 'key', label: 'title' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="目录名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.data3"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="图标">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="popSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addML,
  deleteML,
  editML,
  loadTreeRootML,
  loadTreeChildrenML,
} from "../serve/api";
export default {
  name: "mlgl",

  components: {},

  data() {
    return {
      haschildren: true,
      pid: [],
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      form: { pid: "", name: "", data3: "", id: "" },
      imageUrl: "",
      dialogTitle: "新建",
      dialogVisible: false,
      formInline: {
        search: "",
      },
      activeName: "1",
      options: [],
      tableData: [],
    };
  },

  created() {},

  mounted() {
    this.getTabledata();
  },

  methods: {
    getTabledata() {
      loadTreeRootML({
        async: false,
        pcode: "",
        title: this.formInline.search,
      }).then((res) => {
        console.log(res);
        if (res.success) {
          this.tableData = res.data;
          this.options = res.data;
          // this.$refs.ElTableHeaderRef.doLayout();
        }
      });
    },
    handleClickEdit(data) {
      console.log(data);
      this.dialogTitle = "修改";
      this.dialogVisible = true;
      this.form.name = data.title;
      this.form.id = data.key;

      this.pid[0] = data.parentId;
    },
    handleClickAddChild(data) {
      debugger
      this.dialogTitle = "添加下级";
      this.dialogVisible = true;
      this.form.name = data.title;
      this.form.id = data.key;
      this.pid[0] = data.key;
    },
    handleClickDel(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteML({ id: data.key }).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getTabledata();
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },

    popSubmit() {
      if (this.dialogTitle == "新建") {
        addML(this.form).then((res) => {
          console.log(res);
          this.getTabledata();

        });
      } else if (this.dialogTitle == "修改") {
        this.form.pid = this.pid[0];

        editML(this.form).then((res) => {
          console.log(res);
          this.getTabledata();
        });
      } else if (this.dialogTitle == "添加下级") {
        this.form.pid = this.form.id;

        addML(this.form).then((res) => {
          console.log(res);
          this.getTabledata();

        });
      }

      this.getTabledata();

      this.dialogVisible = false;
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    handleClickTabs(tab, event) {
      console.log(tab, event);
    },

    onSubmit() {
      this.getTabledata();
    },
    add() {
      this.dialogTitle = "新建";
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.mlgl {
  padding: 10px 20px;
  box-sizing: border-box;

  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }
  // .avatar-uploader .el-upload:hover {
  //   border-color: #409eff;
  // }
  // .avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 178px;
  //   height: 178px;
  //   line-height: 178px;
  //   text-align: center;
  // }
  // .avatar {
  //   width: 178px;
  //   height: 178px;
  //   display: block;
  // }
}
</style>
<style>
.mlgl .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mlgl .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.mlgl .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.mlgl .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
